<template>
  <div>
    <!-- 阿里云视频播放器样式 -->
    <link
      rel="stylesheet"
      href="https://g.alicdn.com/de/prismplayer/2.8.1/skins/default/aliplayer-min.css"
    />
    <script
      charset="utf-8"
      type="text/javascript"
      src="https://g.alicdn.com/de/prismplayer/2.8.1/aliplayer-min.js"
    ></script>

    <!-- 定义播放器dom -->

    <div id="J_prismPlayer" class="prism-player" />
  </div>
</template>
<script>
import videoApi from "@/api/index/video";
export default {
  asyncData({ params, error }) {
    return videoApi.getPlayAuth(params.vid).then((response) => {
      return {
        videoSourceId: params.vid,
        playAuth: response.data.data.playAuth,
      };
    });
  },
  /* data() {
    return {
      videoSourceId: "",
      playAuth: "",
    };
  }, */
  created() {
    // console.log(this);
    /* this.videoSourceId = this.$route.params.vid;
    this.getPlayAuth(); */
  },
  mounted() {
    console.log("mounted", this.videoSourceId);
    //打印了一次
    console.log("mounted方法里面", this.playAuth);
    new Aliplayer(
      {
        id: "J_prismPlayer",
        //根据凭证
        encrypType: "1", //如果加密视1
        vid: this.videoSourceId,
        playauth: this.playAuth,
        width: "100%",
        height: "500px",
      },
      function (player) {
        console.log("The player is created.");
      }
    );
  },
  methods: {
    /* getPlayAuth() {
      return new Promise((resolve, inject) => {
        //函数体
        videoApi.getPlayAuth(this.videoSourceId).then((response) => {
          this.playAuth = response.data.data.playAuth;
          console.log(this.playAuth);
          resolve(this.playAuth);
        });
      });
    }, */
  },
};
</script>

